<template>
    <div class="lx_login">
        <!-- 导航栏 -->
        <div class="lx_nav">
            <div class="lx_nav_left"><van-icon name="arrow-left" size="23" onclick="history.back()" /></div>
            <div class="lx_nav_right">登录</div>
        </div>
        <!-- 文字 -->
        <div class="lx_text">
            <div class="lx_text_title">欢迎回来</div>
            <div style="text-align: center; color:#b0b0ba">使用您的手机号和验证码登录或继续使用社交媒体</div>
        </div>
        <!-- 表单 -->
        <div class="lx_form">
            <div class="lx_phone">
                <div style="margin-top: 5px">
                    <van-cell-group inset>
                        <van-field v-model="phone" center clearable label="手机号" placeholder="请输入手机号"
                            :class="{ 'focused': isFocused }" @focus="handleFocus" @blur="handleBlur"></van-field>
                    </van-cell-group>
                </div>
            </div>

            <div class="lx_sms">
                <div style="margin-top: 3px">
                    <van-cell-group inset>
                        <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码"
                            :class="{ 'focused': isSmsFocused }" @focus="handleSmsFocus" @blur="handleSmsBlur">
                            <template #button>
                                <van-button v-if="!isCountingDown" size="small" type="primary"
                                    @click="startCountdown">发送验证码</van-button>
                                <van-button v-else size="small" type="primary" disabled>{{ countdown }}
                                    秒后重试</van-button>
                            </template>
                        </van-field>
                    </van-cell-group>
                </div>

            </div>

            <!-- 记住账号 -->
            <div class="lx_remember">
                <div class="lx_remeber_pwd"><input type="checkbox">记住手机号</div>
                <div class="lx_regist_pwd"></div>
            </div>
        </div>

        <!-- 登录按钮 -->
        <div class="lx_login_btn" @click="forgotten">
            <p>登录</p>
        </div>

        <!-- 跳转其他登录页面icon -->
        <div class="lx_other_login">
            <div class="lx_other"><van-icon name="manager-o" size="30" color="#00be8c" style="margin-left: 15px;"
                    @click="toUserLogin" /></div>
            <div class="lx_other"><van-icon name="apps-o" size="30" color="#00be8c" style="margin-left: 15px;"
                    @click="redirectToGitee" /></div>
            <div class="lx_other"><van-icon name="free-postage" size="30" color="#00be8c" style="margin-left: 15px;"
                    @click="toEmailLogin" /></div>
                    <div class="lx_other"><van-icon name="phone-o" size="30" color="#00be8c" style="margin-left: 15px;" @click="toPhoneLogin"/></div>
            <!-- <div class="lx_other"><van-icon name="smile-o" size="30" color="#00be8c" style="margin-left: 15px;" /></div> -->
        </div>

        <!-- 没有账户？立即注册 -->
        <div class="lx_register" @click="toRegister">
            <p>没有账户？立即注册</p>
        </div>

        <!-- <div class="mask">

           <div class="verification"> 
              <Vverify></Vverify>
            </div>
       </div> -->

        <div class="silde_box">
            <!-- <div class="mask" @click="showVerificationModal = true">
                <div class="verification">
                    点击这里进行验证
                </div>
            </div> -->

            <!-- 验证模态框 -->
            <van-dialog v-model:show="showVerificationModal" title="滑块验证" width="80%" show-cancel-button
                cancel-text="取消" confirm-text="确定" @confirm="handleConfirm" @cancel="handleCancel">
                <slide-verify ref="block" slider-text="向右滑动->" :accuracy="1" @again="onAgain" @success="onSuccess"
                    @fail="onFail" @refresh="onRefresh" :imgs="img"></slide-verify>
            </van-dialog>
        </div>
        </div>
</template>

<script setup lang="ts">
import { ref, onUnmounted } from 'vue';
import { Icon as VanIcon, CellGroup as VanCellGroup, Field as VanField, Button as VanButton } from 'vant';
import axios from 'axios'
import router from '@/router';
import { showSuccessToast, showFailToast } from 'vant';
import Vverify from "./verification.vue";

// 定义表单数据
const phone = ref('');
const sms = ref('');
// icon跳转
const toEmailLogin = () => {
    router.push('/emaillogin')
}

const toPhoneLogin=()=>{
    router.push('/login')
}


const toUserLogin = () => {
    router.push('/userlogin')
}

const toRegister = () => {
    router.push('/register')
}

// 控制文本颜色的响应式变量
const isFocused = ref(false);
// 控制文本颜色的响应式变量
const isPhoneFocused = ref(false);
const isSmsFocused = ref(false);
// 处理聚焦事件
const handleFocus = () => {
    isFocused.value = true;
};

// 处理失焦事件
const handleBlur = () => {
    isFocused.value = false;
};

// 处理短信验证码输入框的聚焦事件
const handleSmsFocus = () => {
    isSmsFocused.value = true;
};

// 处理短信验证码输入框的失焦事件
const handleSmsBlur = () => {
    isSmsFocused.value = false;
};

// 开始倒计时
const isCountingDown = ref(false);
const countdown = ref(60); // 默认倒计时60秒

// 验证码校验
const yzm = /^1[3-9]\d{9}$/

const startCountdown = async () => {
    if (phone.value == '') {
        return showFailToast('请输入手机号');
    } else if (!yzm.test(phone.value)) {
        return showFailToast('请输入正确的手机号');
    } else {
        showVerificationModal.value = true;
        await axios.post("http://127.0.0.1:3000/lx/SMS", { phone: phone.value }).then(res => {
            if (res.data.code == 200) {
                showSuccessToast('验证码发送成功');
            } else {
                showFailToast('验证码发送失败')
                return
            }
        })
        if (isCountingDown.value) return; // 如果已经在倒计时，则不执行
        isCountingDown.value = true;
        const timer = setInterval(() => {
            if (countdown.value > 0) {
                countdown.value--;
            } else {
                clearInterval(timer);
                isCountingDown.value = false;
                countdown.value = 60; // 重置倒计时
            }
        }, 1000);



        // 清除定时器
        onUnmounted(() => {
            clearInterval(timer);
        });
    }
}

// 跳转下一页
const forgotten = async () => {
    await axios.post("http://127.0.0.1:3000/lx/login", { phone: phone.value }).then(res => {
        if (res.data.code == 200) {
            showSuccessToast('登录成功');
            router.push('/home')
            localStorage.setItem('user', JSON.stringify(res.data.data[0]))

        } else {
            showFailToast('登录失败');
        }
    })
}

const redirectToGitee = () => {
    const clientId = 'bbe1345c39d503ff57c4755464029e516c98fb833175c555d95a38e7438778ad' // 这是在Gitee上创建的应用层序所获得的客户端ID
    const redirectUri = encodeURIComponent('http://localhost:5173/home') // 用户授权完成之后，Gitee会将用户重定向这个URL
    // const scope = 'user_info' // 请求的权限范围
    // const state = ''

    const authUrl = `https://gitee.com/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code`
    window.location.href = authUrl
    console.log(authUrl)

}

import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";
import { showToast } from 'vant';
import { Dialog } from 'vant';

// 自定义图片
const img = ref([
    "https://img0.baidu.com/it/u=1552632757,378376738&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
    "https://img2.baidu.com/it/u=4260616497,4153321689&fm=253&fmt=auto&app=138&f=JPEG?w=656&h=435"
]);

const block = ref<SlideVerifyInstance | null>(null);

const showVerificationModal = ref(false);

const onAgain = () => {
    // 刷新
    block.value?.refresh();
};

// 成功的回调
const onSuccess = (times: number) => {
    showToast(`验证成功，耗时 ${times} 毫秒`);
    showVerificationModal.value = false; // 关闭模态框
};

// 失败的回调
const onFail = () => {
    showToast('验证不成功');
};

// 确认按钮点击事件
const handleConfirm = () => {
    // 可以在这里处理确认操作
    showVerificationModal.value = false;
};

// 取消按钮点击事件
const handleCancel = () => {
    showVerificationModal.value = false;
};
</script>

<style>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.lx_login {
    width: 100vw;
    height: 100vh;

}

.lx_nav {
    width: 100%;
    height: 50px;
    display: flex;
    border-bottom: 1px solid #ccc;
}

.lx_nav_left {
    width: 50px;
    height: 30px;
    margin-left: 30px;
    margin-top: 14px;
}


.lx_nav_right {
    width: 310Px;
    height: 50px;
    font-size: 18px;
    margin-left: 120px;
    line-height: 50px;
}

.lx_text {
    width: 100%;
    height: 50px;
    margin-top: 50px;
    /* background: pink; */
}


.lx_text_title {
    font-size: 25px;
    text-align: center;
    line-height: 50px;
}

.lx_form {
    width: 100%;
    height: 250px;
    overflow: hidden;
    margin-top: 50px;
    background: #fff;
}

.lx_phone {
    width: 100%;
    height: 55px;
    margin-top: 50px;
    border: 1px solid #ccc;
    border-radius: 50px;
}

.lx_sms {
    width: 100%;
    height: 60px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 50px;
}

.lx_phone .van-cell-group,
.lx_sms .van-cell-group {
    background: #f9f9f9;
}

.van-field {
    background: #ffffff;
}

.van-field.focused .van-cell__title,
.van-field.focused .van-cell__value,
.van-field.focused .van-field__control {
    color: #00be8c !important;
}

.van-button {
    background: #00be8c;
    color: white;
}

.van-field.focused .van-cell__title,
.van-field.focused .van-cell__value,
.van-field.focused .van-field__control {
    color: #00be8c !important;
}

.lx_remember {
    width: 100%;
    height: 50px;
    margin-top: 30px;
    display: flex;
    justify-content: space-around;
}

.lx_remeber_pwd {
    width: 100px;
    height: 50px;
    line-height: 50px;
}

.lx_regist_pwd {
    width: 220px;
    height: 50px;
    text-align: right;
    line-height: 50px;
    color: #cecece;
}

.lx_login_btn {
    width: 95%;
    height: 50px;
    background: #00be8c;
    margin-left: 10px;
    margin-top: 20px;
    border-radius: 8px;
}

.lx_login_btn p {
    text-align: center;
    line-height: 50px;
    color: #fff;
}

.lx_other_login {
    width: 100%;
    height: 50px;
    /* background: palegreen; */
    margin-top: 60px;
    display: flex;
    justify-content: space-around;
}

.lx_other {
    width: 60px;
    height: 50px
}

.lx_register {
    width: 100%;
    height: 50px;
    margin-top: 20px;
    text-align: center;
    line-height: 50px;
    color: #989898;
}
.mask {
  cursor: pointer;
  padding: 20px;
  border: 1px solid #ccc;
  text-align: center;
}

.verification {
  font-size: 16px;
  color: #00be8c;
}
</style>